<template>
  <el-dialog
    title="题目预览"
    :visible="isPreview"
    @open="handleOpen"
    @close="handleClose"
    width="900px"
  >
    <div class="container">
      <!-- 属性区 -->
      <div class="props">
        <!-- 第一行 -->
        <el-row style="height:30px">
          <!-- 题型 -->
          <el-col :span="6"
            >【{{ $t("table.questionType") }}】：{{
              formatQuestionType(questionInfo.questionType)
            }}</el-col
          >
          <!-- 编号 -->
          <el-col :span="6"
            >【{{ $t("table.number") }}】：{{ questionInfo.id }}</el-col
          >
          <!-- 难度 -->
          <el-col :span="6"
            >【{{ $t("table.difficulty") }}】：{{
              formatQDifficulty(questionInfo.difficulty)
            }}</el-col
          >
          <!-- 标签 -->
          <el-col :span="6"
            >【{{ $t("question.tags") }}】：{{ questionInfo.tags }}</el-col
          >
        </el-row>
        <!-- 第二行 -->
        <el-row style="height:30px">
          <!-- 学科 -->
          <el-col :span="6"
            >【{{ $t("table.subject") }}】：{{
              questionInfo.subjectName
            }}</el-col
          >
          <!-- 目录 -->
          <el-col :span="6"
            >【{{ $t("table.directory") }}】：{{
              questionInfo.directoryName
            }}</el-col
          >
          <!-- 方向 -->
          <el-col :span="6"
            >【{{ $t("question.direction") }}】：{{
              questionInfo.direction
            }}</el-col
          >
        </el-row>
        <hr />
      </div>
      <!-- 题干区 -->
      <div>
        <p>【{{ $t("table.questionStem") }}】：</p>
        <div class="stem" v-html="questionInfo.question"></div>
        <!-- 1.若为单选题 -->
        <div v-if="questionInfo.questionType === '1'">
          <p>
            {{ $t("question.singleChoice") }}
            {{ $t("question.options") }}
            {{ $t("question.rightAnswer") }}
          </p>
          <el-radio-group v-model="rightChoice">
            <el-radio
              v-for="item in questionInfo.options"
              class="radioBtn"
              :key="item.id"
              :label="item.code"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </div>
        <!-- 2.若为多选题 -->
        <div
          v-else-if="questionInfo.questionType === '2'"
          @click="return false;"
        >
          <p>
            {{ $t("question.multipleChoice") }}
            {{ $t("question.options") }}
            {{ $t("question.rightAnswer") }}
          </p>
          <el-checkbox-group v-model="rightChoice">
            <el-checkbox
              v-for="item in questionInfo.options"
              class="checkbox"
              :label="item.code"
              :key="item.code"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <hr />
      </div>
      <!-- 下三栏区 -->
      <div class="lower">
        <!-- 参考答案 -->
        <el-row>
          【{{ $t("question.refer") }}】：
          <el-button
            type="danger"
            size="small"
            @click="showVideo = !showVideo"
            >{{ $t("question.viewVideo") }}</el-button
          >
          <div v-show="showVideo">
            <video
              :src="questionInfo.videoURL"
              v-if="questionInfo.videoURL"
              style="margin-top:10px;width:400px"
              controls
            ></video>
            <span v-else>{{ $t("question.noVideo") }}</span>
          </div>
        </el-row>
        <hr />
        <!-- 答案解析 -->
        <el-row type="flex" align="middle">
          <span>【{{ $t("question.answer") }}】：</span>
          <span v-html="questionInfo.answer"></span>
        </el-row>
        <hr />
        <!-- 题目备注 -->
        <el-row
          >【{{ $t("question.remarks") }}】：{{ questionInfo.remarks }}</el-row
        >
      </div>
    </div>
    <!--     <div v-else>
      当前试题详情页面找不到了
    </div> -->
    <template #footer>
      <el-button type="primary" @click="handleClose">{{
        $t("tagsView.close")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
// 引入获取试题详情的请求函数
import { detail } from "@/api/hmmm/questions";
export default {
  name: "QuestionPreview",
  data() {
    return {
      questionInfo: {}, //题目详情
      showVideo: false //答案解析视频是否显示
    };
  },
  props: {
    isPreview: {
      type: Boolean
    }, //当前弹窗是否显示
    curId: {
      type: Number
    } //当前试题
  },
  computed: {
    // 单选或多选的正确选项
    rightChoice() {
      const rightArr = this.questionInfo.options.filter(item => item.isRight);
      if (rightArr.length > 1) {
        return rightArr.map(item => item.code); // 多选题正确选项(Array)
      } else if (rightArr.length === 1) {
        return rightArr[0].code; // 单选题正确选项(String)
      } else {
        return null;
      }
    }
  },
  methods: {
    // 获取题目详情函数
    fetchQuestionDetail() {
      // console.log(this.curId);
      detail({ id: this.curId })
        .then(({ data: res }) => {
          console.log(res);
          this.questionInfo = res;
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 对话框开启执行的回调函数
    handleOpen() {
      // 获取当前题目详情
      this.fetchQuestionDetail();
    },
    //对话框关闭执行的回调函数
    handleClose() {
      this.questionInfo = {}; //重置试题详情为空对象
      this.showVideo = false; //关闭视频显示
      this.$emit("close-preview"); //通知父组件关闭对话框
    },
    // 题型数据处理函数
    formatQuestionType(n) {
      const map = {
        1: this.$t("question.singleChoice"),
        2: this.$t("question.multipleChoice"),
        3: this.$t("question.shortAnswer")
      };
      return map[n];
    },
    // 难度数据处理函数
    formatQDifficulty(n) {
      const map = {
        1: this.$t("question.simple"),
        2: this.$t("question.ordinary"),
        3: this.$t("question.hard")
      };
      return map[n];
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer {
  text-align: right;
}
.radioBtn,
.checkbox {
  display: block;
  line-height: 1.5;
  font-size: 20px;
}
::v-deep img {
  width: 100%;
}
.stem {
  color: blue;
}
</style>
